<!-- @format -->
<script setup>
	import { ref } from 'vue'
	import BitTable from './components/bit-table.vue'
	import BitFeature from './components/bit-feature.vue'

	// 课程列表
	const courseList = ref([
		{
			id: 101001,
			title: 'C语言刷题',
			cover:
				'https://bit-1256306791.cos.ap-chengdu.myqcloud.com/ffec5c1ce4b0403b163e3865.jpg',
			feature: ['通俗易懂', '上手快'],
			type: 'C语言'
		},
		{
			id: 101002,
			title: 'C++系统就业课',
			cover:
				'https://bit-1256306791.cos.ap-chengdu.myqcloud.com/0006cf36e4b05af5acbaeb35.jpg',
			feature: ['全面', '高效'],
			type: 'C++'
		},
		{
			id: 101003,
			title: 'Java系统就业课',
			cover:
				'https://bit-1256306791.cos.ap-chengdu.myqcloud.com/0006cf57e4b05af5acbaeb38.jpg',
			feature: ['牛', '全覆盖'],
			type: 'Java'
		},
		{
			id: 101004,
			title: '测试开发系统就业课',
			cover:
				'https://bit-1256306791.cos.ap-chengdu.myqcloud.com/0006cf08e4b05af5acbaeb32.jpg',
			feature: ['爽爆了', '干货满满'],
			type: '测试'
		}
	])

	// 删除
	const del = (i) => {
		if (window.confirm('确认删除么?')) {
			courseList.value.splice(i, 1)
		}
	}
</script>

<template>
	<h1>比特就业课课程列表</h1>
	<bit-table :data="courseList">
		<template #thead>
			<th>序号</th>
			<th>类别</th>
			<th>名称</th>
			<th>封面</th>
			<th>特点</th>
			<th>操作</th>
		</template>
		<template #default="{ row, i }">
			<td>{{ i + 1 }}</td>

			<td>{{ row.type }}</td>
			<td>{{ row.title }}</td>
			<td>
				<img
					width="240"
					:src="row.cover"
					:alt="row.title" />
			</td>
			<td class="feature">
				<bit-feature v-model="row.feature" />
			</td>
			<td>
				<button @click="del(i)">删除</button>
			</td>
		</template>
	</bit-table>
</template>

<style lang="scss">
	h1 {
		text-align: center;
	}
</style>
